<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加学员信息表</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="box1">
        <div class="container">
            <h1>学员信息表</h1>
            <p>1804</p>
        </div>
    </div>



    <div class="container">
        <div class="box2">
            <h2>添加</h2>
            <input type="text" placeholder="姓名" id="n">
            <select id="s">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <input type="number" placeholder="年龄" id="a">
            <button id="btn">添加</button>
        </div>
    </div>
    <div class="container">
        <h3>列表</h3>
        <ul id="list"></ul>
    </div>


<script>
        document.querySelector("#btn").addEventListener("click",function () {
            var n = document.querySelector("#n").value;
            console.log(n);
            var s = document.querySelector("#s").value;
            console.log(s);
            var a = document.querySelector("#a").value;
            console.log(a);
            var xmlhttp;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            } else{
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
//                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a, true);
            xmlhttp.send();
            de()
        })

        function de() {
            var n = document.querySelector("#n").value;
            console.log(n);
            var s = document.querySelector("#s").value;
            console.log(s);
            var a = document.querySelector("#a").value;
            console.log(a);
            var xmlhttp;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            } else{
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    var json = JSON.parse(xmlhttp.responseText)
//                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    document.querySelector("#list").innerHTML="";
                    for(let i = 0;i<json.data.length;i++){
                        var li = document.createElement("li");
                        var spanName = document.createElement("span");
                        spanName.innerHTML = json.data[i].studentName;
                        var spanSex = document.createElement("span");
                        spanSex.innerHTML = json.data[i].sex;
                        var spanAge = document.createElement("span");
                        spanAge.innerHTML = json.data[i].age;
                        li.appendChild(spanName);
                        li.appendChild(spanSex);
                        li.appendChild(spanAge);

                        document.querySelector("#list").appendChild(li);
                    }
                }
            }
            xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
            xmlhttp.send();
        }
    de()
</script>
</body>
</html>